<template>
  <div id="content">
    <!-- sideBar 侧边栏-->
<!--    <div class="sideBar">
      &lt;!&ndash; 最新推荐&ndash;&gt;
      <div class="sideBox" id="sideZxtj">
        <div class="hd">
          <h3><span>最新推荐</span></h3>
        </div>
        <div class="bd">
          <ul class="infoList infoListA">
            <li v-for="(item,index) in pickList.slice(0,10)" :key="index"
                style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
            >
              <a @click="btnClick(item)" href="javascript:;"
                 :title="'标题：'+item.pickTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
              >{{ item.pickTitle }}</a>
            </li>
          </ul>
        </div>
      </div>

      &lt;!&ndash; 热榜推荐&ndash;&gt;
      <div class="sideBox" id="sideZxwz">
        <div class="hd">
          <h3><span>热榜推荐</span></h3>
        </div>
        <div class="bd">
          <ul class="infoList infoListA">
            <li v-for="(item,index) in pickListClick.slice(0,10)" :key="index"
                style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
            >
              <a @click="btnClick(item)" href="javascript:;"
                 :title="'标题：'+item.pickTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
              >{{ item.pickTitle }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>-->

    <!-- 主要内容-->
<!--    <div class="mainContent">
      <div class="mianBox" id="articleList">
        <Breadcrumb></Breadcrumb>
        <div style="border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
          &lt;!&ndash; 列表信息&ndash;&gt;
          <div v-if="key==='/pick/list'" class="wBd">
            <ul class="newsList" v-for="(item,index) in pickList" :key="index">
              <li>
                <span class="date">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
                <a @click="btnClick(item)" href="javascript:;"
                   :title="'标题：'+item.pickTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
                >{{ vague('2', item.pickTitle) }}</a></li>
              <li v-if="(index+1)%5===0" class="split"></li>
            </ul>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getPickList"
            />
          </div>

          &lt;!&ndash; 正文内容&ndash;&gt;
          <router-view></router-view>
        </div>
      </div>
    </div>-->

    <div class="mainContent" style="width: 100%;float: none">
      <div class="mianBox" id="picChildList">
        <Breadcrumb></Breadcrumb>
        <div style="border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
          <!-- 列表信息-->
          <div v-if="key==='/pick/list'" class="wBd" style="padding: 20px;">
            <ul class="picList1">
              <li :style="{'margin':((index+1)%4==0)?'0px':'0px 18px 0 0'}" class="first" v-for="(item,index) in pickList" :key="index">
                <div class="pic" style="height: 163px">
                  <a @click="btnClick(item)" href="javascript:;"
                     :title="'标题：'+item.pickTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
                  >
                    <!--                    <img :src="item.img[0].url">-->
<!--                    <img :src="changeUrl(item.img[0].fileName)">-->
                    <img :src="item.url">
                  </a>
                </div>
                <div class="title">
                  <a @click="btnClick(item)" href="javascript:;"
                     :title="'标题：'+item.pickTitle+'\n'+'浏览量：'+item.click+'\n'+'发表时间：'+item.createTime"
                  >{{ vague('6', item.pickTitle) }}</a>
                </div>
              </li>
            </ul>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getPickList"
            />
          </div>

          <!-- 正文内容-->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listPick, listPickClick, updatePickClick } from '@/api/pick'
export default {
  name: 'Pick',
  inject: ['reloadMain'],
  components: {},
  data() {
    return {
      // 总条数
      total: 0,
      // 活动表格数据
      pickList: [],
      pickListClick: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        pickTitle: undefined,
        createBy: undefined,
        status: '0'
      }
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
    this.getPickList()
  },
  methods: {
    /** 查询活动列表 */
    getPickList() {
      listPick(this.queryParams).then(response => {
        this.pickList = response.rows
        this.pickList.map(item => {
          item.url = this.getObjectKeys(item.pickContent)
        })
        this.total = response.total
      })
      /*listPickClick(this.queryParams).then(res => {
        this.pickListClick = res.rows
      })*/
    },

    //点击选中
    btnClick(data) {
      updatePickClick(data)
      this.$router.push({
        path: '/pick/list/edit',
        query: {
          id: data.pickId
        }
      })
      this.reloadMain();
    }
  }
}
</script>
